<template>
  <div class="cfDrawer-index">
    <el-drawer
      :title="drawerObj.title"
      :size="drawerObj.width"
      v-if="drawerObj.visible"
      :visible="drawerObj.visible"
      ref="drawerObj"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :append-to-body="false"
      :before-close="beforeClose"
    >
      <div class="drawer-content">
        <slot name="content"></slot>
      </div>
      <div class="drawer-footer">
        <el-button size="small" @click="handleCancel">取消</el-button>
        <slot name="footer"></slot>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    props: {
      drawerObj: {
        type: Object,
        default: ({})
      }
    },
    data() {
      return {
        
      }
    },
    methods: {
      beforeClose() {
        this.drawerObj.visible = false;
      },
      handleCancel() {
        this.beforeClose();
      },
    },
  }
</script>

<style lang="scss" scoped>
.cfDrawer-index {
  .drawer-content {
    padding: 0 24px 24px;
    height: calc(100% - 57px);
    overflow: overlay;
  }
  .drawer-footer {
    height: 56px;
    line-height: 56px;
    border-top: 1px solid #eee;
    text-align: right;
    padding-right: 16px;
  }
}
</style>